<template>
	<view class="mine-container">
		<u-navbar :title="title" :bgColor="bgColor" :leftIcon='leftIcon'>
			
		</u-navbar>
		<!--顶部个人信息栏-->
		<view class="header-section">
			<!-- <view class="flex padding justify-between">
        <view class="flex align-center">
          <view v-if="!avatar" class="cu-avatar xl round bg-white">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
          </image>
          <view v-if="!name" @click="handleToLogin" class="login-tip">
            点击登录
          </view>
          <view v-if="name" @click="handleToInfo" class="user-info">
            <view class="u_title">
              用户名：{{ name }}
            </view>
          </view>
        </view>
        <view @click="handleToInfo" class="flex align-center">
          <text>个人信息</text>
          <view class="iconfont icon-right"></view>
        </view>
      </view> -->
		</view>
		<view class="header_top">
			<view class="header_top_containers">
				<view class="header_top_containers_content">
					<view class="header_top_containers_img">
						<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle" width="160rpx"
							height="160rpx" v-if="avatar"></u--image>
						<u--image src="/static/images/showImg/avtar.png" shape="circle" width="160rpx"
							height="160rpx" v-else></u--image>
					</view>
					<view class="header_top_containers_name" v-if="name">
						{{ name }}
					</view>
					<view class="header_top_containers_name" v-else @tap="handleToLogin">
						点击登录
					</view>
					<view class="header_top_containers_tip display_flex_center " v-if="name">
						上海皮肤病医院 认证医生
					</view>
				</view>
			</view>
		</view>


		<view class="content-section" v-for="(listItems,listIndexs) in listArr" :key="listIndexs">
			<view class="mine-actions">
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(listItem,listIndex) in listItems" :key="listIndex"
						@tap="gridEvent(listItem,listIndex)">
						<u--image :src="listItem.icon" width="80rpx" height="80rpx"></u--image>
						<text class="grid-text">{{listItem.text}}</text>
					</u-grid-item>
				</u-grid>
			</view>


			<!-- <view class="menu-list">
				<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
					<view class="menu-item-box">
						<view class="iconfont icon-user menu-icon"></view>
						<view>编辑资料</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleHelp">
					<view class="menu-item-box">
						<view class="iconfont icon-help menu-icon"></view>
						<view>常见问题</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleAbout">
					<view class="menu-item-box">
						<view class="iconfont icon-aixin menu-icon"></view>
						<view>关于我们</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleToSetting">
					<view class="menu-item-box">
						<view class="iconfont icon-setting menu-icon"></view>
						<view>应用设置</view>
					</view>
				</view>
			</view> -->

		</view>
		<view class="" style="height:100rpx;">

		</view>
	</view>
</template>

<script>
	import storage from '@/common/storage'

	export default {
		data() {
			return {
				bgColor:'transparent',
				title:'',
				leftIcon:'',
				name: this.$store.state.user.name,
				version: getApp().globalData.config.appInfo.version,
				listArr: [
					[{
						icon: '/static/images/showImg/m-1.png',
						text: '个人信息'
					}, {
						icon: '/static/images/showImg/Invite.png',
						text: '登记签到'
					},{
						icon: '/static/images/showImg/m-2.png',
						text: '邀请海报'
					}, {
						icon: '/static/images/showImg/m-3.png',
						text: '小程序码'
					}],
					[{
						icon: '/static/images/showImg/m-4.png',
						text: '我的资料'
					}, {
						icon: '/static/images/showImg/m-5.png',
						text: '我的医生'
					}, {
						icon: '/static/images/showImg/m-6.png',
						text: '我咨询的'
					}, {
						icon: '/static/images/showImg/m-7.png',
						text: '我的提醒'
					}],
					[{
						icon: '/static/images/showImg/m-8.png',
						text: '顾客管理'
					}, {
						icon: '/static/images/showImg/m-9.png',
						text: '我的报表'
					}, {
						icon: '/static/images/showImg/m-10.png',
						text: '预约信息'
					}, {
						icon: '/static/images/showImg/m-11.png',
						text: '咨询我的'
					}],
					[{
						icon: '/static/images/showImg/m-12.png',
						text: '科室报表'
					}, {
						icon: '/static/images/showImg/m-13.png',
						text: '今日看板'
					}, {
						icon: '/static/images/showImg/m-14.png',
						text: '医护申请'
					}, {
						icon: '/static/images/showImg/m-15.png',
						text: '医护审核'
					}]
				]
			}
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},
			// windowHeight() {
			// 	return uni.getSystemInfoSync().windowHeight - 50
			// }
		},
		onPageScroll(e) {
			 if(e.scrollTop>50){
				 this.bgColor='#49B9AD'
			 }else{
				 this.bgColor='transparent'
			 }
				
		},
		methods: {
			gridEvent(item, index) {
				if (item.text == '个人信息') {
					
					this.$tab.navigateTo('/subPackages/mine/info/index')
					
				} else if (item.text == '就诊报道') {
					
				    this.$tab.navigateTo('/subPackages/remind/medicalInfo/report')
					
				} else if (item.text == '邀请海报') {
					
				    this.$modal.showToast('邀请海报 模块建设中~')
					
				} else if (item.text == '小程序码') {
					
					this.$modal.showToast('小程序码 模块建设中~')
					
				}else if (item.text == '我的资料') {
					
					this.$tab.navigateTo('/subPackages/mine/customer/infomation')
					
				}else if (item.text == '我的医生') {
					
					this.$modal.showToast('我的医生 模块建设中~')
					
				}else if (item.text == '我咨询的') {
					
					this.$modal.showToast('我咨询的 模块建设中~')
					
				}else if (item.text == '我的提醒') {
					
					this.$tab.navigateTo('/subPackages/mine/customer/remind')
					
				}else if (item.text == '顾客管理') {
					
					this.$tab.navigateTo('/subPackages/mine/customer/manage')
					
				}else if (item.text == '我的报表') {
					
					this.$modal.showToast('我的报表 模块建设中~')
					
				}else if (item.text == '预约信息') {
					
					this.$modal.showToast('预约信息 模块建设中~')
					
				}else if (item.text == '咨询我的') {
					
					this.$modal.showToast('咨询我的 模块建设中~')
					
				}else if (item.text == '科室报表') {
					
					// this.$modal.showToast( '科室报表 模块建设中~')
					this.$tab.navigateTo('/subPackages/mine/depart/report')
					
				}else if (item.text == '今日看板') {
					
					this.$modal.showToast('今日看 模块建设中~')
					
				}else if (item.text == '医护申请') {//medicale/applicate
					
					this.$tab.navigateTo('/subPackages/mine/medicale/applicate')
					
				}else if (item.text == '医护审核') {
					
					this.$tab.navigateTo('/subPackages/mine/medicale/review')
					
				}
				
			},
			
			
			handleToInfo() {
				this.$tab.navigateTo('/subPackages/mine/info/index')
			},
			handleToEditInfo() {
				this.$tab.navigateTo('/subPackages/mine/info/edit')
			},
			handleToSetting() {
				this.$tab.navigateTo('/subPackages/mine/setting/index')
			},
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			handleToAvatar() {
				this.$tab.navigateTo('/subPackages/mine/avatar/index')
			},
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index')
					})
				})
			},
			handleHelp() {
				this.$tab.navigateTo('/subPackages/mine/help/index')
			},
			handleAbout() {
				this.$tab.navigateTo('/subPackages/mine/about/index')
			},
			handleJiaoLiuQun() {
				this.$modal.showToast('QQ群：133713780')
			},
			handleBuilding() {
				this.$modal.showToast('模块建设中~')
			}
		}
	}
</script>

<style lang="scss">
	.header_top {
		padding: 0 24rpx;

		&_containers {
			margin-top: -150rpx;
			width: 100%;
			border-radius: 20rpx;
			background: $uni-bg-color;
			height: 246rpx;
			position: relative;

			&_content {
				position: absolute;
				top: -74rpx;
				left: 50%;
				transform: translateX(-50%);
			}

			&_img {
				width: 180rpx;
				height: 180rpx;
				background: $uni-bg-color;
				border-radius: 180rpx;
				padding: 8rpx;
				margin: 0 auto;
				border: 2rpx solid $uni-border-color3;

			}

			&_name {
				color: $uni-text-color2;
				font-size: 32rpx;
				line-height: 45rpx;
				text-align: center;
				font-weight: 700;
				margin-top: 20rpx;
			}

			&_tip {
				font-size: 20rpx;
				margin-top: 6rpx;
				background: $uni-bg-second-color;
				border: 2rpx solid $uni-color-main;
				color: $uni-color-main;
				padding: 3rpx 6rpx;
				border-radius: 10rpx;
			}
		}
	}

	.mine-container {
		width: 100%;
		height: 100%;

		.header-section {
			height:400rpx;
			background-color: $uni-color-main;
			color: white;
		}

		.content-section {
			position: relative;
			margin-top: 18rpx;
			padding: 0 24rpx;

			.mine-actions {
				padding: 20rpx 26rpx;
				border-radius: 20rpx;
				background-color: $uni-bg-color;

				.grid-text {
					margin-top: 12rpx;
					line-height: 34rpx;
					font-size: 24rpx;
				}
			}
		}
	}
</style>